<template>
  <div class="app-container" v-loading="loading">
    <el-row type="flex" v-if="deviceId && !loading">
      <el-col :span="12" class="card-box" v-for="(camera,index) in cameraList" :key="index" :style="{ paddingLeft: index%2 === 0 ? '0':'5px',paddingRight:index%2 === 0 ? '5px':'0'}">
        <el-card style="height: 100%">
          <template #header><span>{{ deviceName + ' - 视频监控'}}</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <CameraPlayer :style="{width: '100%', height: '350px'}" v-if="camera.id" :device-id="camera.id"/>
            <el-empty v-else description="无视频监控" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box" :style="{paddingLeft: cameraList.length%2 === 0 ? '0':'5px',paddingRight:cameraList.length%2 === 0 ? '5px':'0'}">
        <el-card style="height: 100%">
          <template #header><span>煤流截面图</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <Section :device-id="deviceId"></Section>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box" :style="{paddingLeft: cameraList.length%2 === 0 ? '5px':'0',paddingRight:cameraList.length%2 === 0 ? '0':'5px'}">
        <el-card style="height: 100%">
          <template #header><span>煤流厚度趋势图</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <Thickness :device-id="deviceId"></Thickness>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box" :style="{paddingLeft: cameraList.length%2 === 0 ? '0':'5px',paddingRight:cameraList.length%2 === 0 ? '5px':'0'}">
        <el-card style="height: 100%">
          <template #header><span>煤流厚度平均值</span><span style="float:right">单位：cm</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <average :device-id="deviceId"></average>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box" v-for="(camera,index) in cameraList" :key="index" :style="selfStyle(index)">
        <el-card style="height: 100%">
          <template #header><span>{{ camera.deviceName + '-煤流分析趋势图'}}</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <Proportion :device-id="camera.id" />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="SieveDetail">
import Section from './section.vue';
import Thickness from './thickness.vue';
import Average from './average.vue';
import Proportion from './proportion.vue';
import CameraPlayer from '@/views/camera/index.vue';
import { getCamera } from '@/api/coal/device';

const { proxy } = getCurrentInstance();
const route = useRoute();

const deviceList = ref([]);
const deviceId = ref(null);
const deviceName = ref(null);
const cameraList = ref([]);
const loading = ref(false);

onMounted(() => {
  deviceId.value = Number(route.query.deviceId);
  deviceName.value = route.query.deviceName;
  getCameraByDeviceId(deviceId.value)
})

function getCameraByDeviceId(deviceId) {
  loading.value = true
  cameraList.value = []
  getCamera(deviceId).then(response => {
    loading.value = false
    cameraList.value = response.data;
  })
}
function selfStyle(index){
  if (cameraList.value.length%2 === 0){
    return { 'paddingLeft': index%2 === 0 ? '5px':'0','paddingRight': index%2 === 0 ? '0':'5px'}
  }
  return { 'paddingLeft': index%2 === 0 ? '0':'5px','paddingRight': index%2 === 0 ? '5px':'0'}
}

onBeforeUnmount(() => {

})



</script>
